<script setup>
import { Expand, CaretBottom, Close } from '@element-plus/icons-vue';
import { ref, watch } from 'vue';
import userImg from '@/assets/images/user.png';

const username = ref('焦文轩');

const emit = defineEmits(['changeCollapse']);

const isCollapse = ref(false);
const changeCollapse = () => {
    isCollapse.value = !isCollapse.value;
};

watch(isCollapse, () => {
    emit('changeCollapse', isCollapse.value);
});

const breadMenu = ref([
    { id:1, name:'首页', path:'/home' },
    { id:2, name:'外呼营销任务', path:'/login' },
    { id:3, name:'客服登记回电', path:'/login' }
]);
function menuDelete(id){
    breadMenu.value.splice(id,1);
}
</script>
<template>
    <div class="container">
        <el-row justify="space-between" class="container-top">
            <el-col :span="6" class="collapsebar">
                <el-icon class="pointer" color="#409EFF" @click="changeCollapse"><Expand /></el-icon>
                <el-text size="small" style="color: #000; padding-left: 5px;">运营管理平台</el-text>
            </el-col>
            <el-col :span="6" class="username pointer">
                <el-image :src="userImg" fit="fill" :lazy="true" class="userImg"></el-image>
                <el-text size="small" style="color: #000;">欢迎回来，{{ username }}</el-text>
                <el-icon><CaretBottom /></el-icon>
            </el-col>
        </el-row>
        <el-row class="container-bottom">
            <el-breadcrumb separator="">
                <el-breadcrumb-item :to="{ path: `${item.path}`}"  v-for="item in breadMenu" :key="item.id">
                    <el-text size="small" class="breadcrumb">
                        {{ item.name }}
                        <el-icon class="menuDelete" @click="menuDelete(item.id - 1)"><Close /></el-icon>
                    </el-text>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>
    </div>
</template>
<style lang="scss" scoped>
.container{
    width: 100%;
    height: 100%;
    .pointer:hover {
        cursor: pointer;
    }
    .container-top {
        height: 50%;
        align-items: center;
        border-bottom: 1px solid #ccc;
        .collapsebar{
            padding-left: 10px;
            display: flex;
            align-items: center;
        }
        .username {
            padding-right: 30px;
            display: flex;
            align-items: center;
            justify-content: end;
            .userImg {
                padding-right: 10px;
                width: 20px;
            }
        }
    }
    .container-bottom {
        height: 50%;
        padding: 0 10px;
        align-items: center;
        border-bottom: 1px solid #ccc;
        .breadcrumb {
            padding: 5px;
            border: 1px solid #409EFF;
            background-color: rgb(243, 249, 255);
            display: flex;
            align-items: center;
            text-align: center;
            .menuDelete:hover {
                color: red;
            }
        }
    }
}
</style>